<template>
  <div class="inner-list-container">
    <ul v-if="selecetUserList.length">
      <li
        class="user-li"
        v-for="(user, i) in selecetUserList"
        :key="i"
        :class="{ active: user.active }"
        @click="openChat(user)"
      >
        <div class="user-name">
          <div class="name col1">{{ user.nikeName + user.userPhone }}</div>
          <div class="last-time col2">{{ user.lastTime | formatDate }}</div>
        </div>
        <div class="msg-state">
          <div class="last-text col1">
            {{ user.lastTxt | lastTxt}}
          </div>
          <div class="icon-more" v-if="user.offline">
            <div class="off-line">已下线</div>
          </div>
          <div class="icon-more" v-if="user.unread > 0 && !user.offline">
            <div class="num">{{ user.unread }}</div>
          </div>
        </div>
      </li>
    </ul>
    <div v-if="typeVisible">
      <el-dialog title="会话类型" :visible.sync="typeVisible" width="30%">
        <div class="mark-wrap" v-for="category in markTree" :key="category.id">
          <div class="category">{{ category.dictKey }}</div>
          <div class="mrak" v-if="category.children.length">
            <el-tag
              :type="mark.select ? '' : 'info'"
              v-for="mark in category.children"
              :key="mark.id"
              @click="clickTag(mark)"
              >{{ mark.dictKey }}</el-tag
            >
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="typeVisible = false">取 消</el-button>
          <el-button type="primary" @click="enterMark">结束会话</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getMarks, setMark } from "@/api/chat";
import { mapMutations, mapState } from "vuex";
export default {
  name: "inner-list",
  data() {
    return {
      typeVisible: false,
      markTree: [],
      delMeetingId: "",
      selectTags: [],
      remark: "",
    };
  },
  filters:{
     lastTxt(data){
      const  brIndex = data.indexOf('<br/>')
       if(brIndex > -1){
         /* eslint-disable */
        return data.slice(0,brIndex).replace(/\&nbsp;/g,'')
       } else{
         /* eslint-disable */
        return data.replace(/\&nbsp;/g,'')
       }
     }
  },
  created() {
    this.getMarkList();
  },
  props: {},
  watch: {
    // updataList: {
    //   handler(newVal) {
    //     this.openType(newVal);
    //   },
    //   deep: true,
    // },
    closeCurrent(val) {
      if (val === true) {
        this.openType();
      }
    },
  },
  computed: {
    ...mapState(["selecetUserList", "currentChat", "closeCurrent",'idStore']),
  },
  methods: {
    ...mapMutations([
      "setCurrentChat",
      "updateSelecetUserList",
      "updateMeeting",
      "setCloseCurrent",
    ]),
    openChat(user) {
      // if (this.currentChat.meetingId == user.meetingId) {
      //   return;
      // }
      this.setCurrentChat(user);
      this.selecetUserList.forEach((item) => {
        item.active = false;
        if (item.meetingId == user.meetingId) {
          item.active = true;
          item.unread = 0;
        }
      });
    },
    openType() {
      this.markTree.forEach((item) => {
        item.children.forEach((item) => (item.select = false));
      });
      this.delMeetingId = this.currentChat.meetingId;
      this.typeVisible = true;
      this.setCloseCurrent(false);
    },
    clickTag(data) {
      if (data.select) {
        data.select = false;
        this.selectTags = this.selectTags.map((item) => item != data.id);
      } else {
        data.select = true;
        this.selectTags.push(data.id);
      }
      this.$forceUpdate();
    },
    // 获取标签
    getMarkList() {
      const params = ["im-data"];
      getMarks(params)
        .then((res) => {
          let {
            data: { result },
          } = res;
          this.markTree = result[0]["im-data"];
          const parentMarkList = result[0]["im-data"];
          const keys = parentMarkList.map((item) => item.routeStr);
          getMarks(keys).then((marks) => {
            let {
              data: { result },
            } = marks;
            this.markTree.forEach((item) => {
              item.children = result[0][item.routeStr];
            });
          });
        })
        .catch(() => {
           throw new Error('获取标签接口异常')
          // this.$message.error(`获取标签异常`);
        });
    },
    enterMark() {
      if (this.selectTags.length < 1) {
        this.$message.warning("请至少设置一个类型的标签！");
        return;
      }
      const params = {
        meetingId: this.delMeetingId,
        labelCodeList: this.selectTags,
        remark: this.remark,
        waiterId: this.idStore.waiterId
      };
      setMark(params)
        .then(() => {
          this.$message.success("会话已结束！");
          const params = {
            type: "del",
            meetingId: this.delMeetingId,
          };
          this.updateSelecetUserList(params);
          this.selectTags = [];
          this.typeVisible = false;
        })
        .catch(() => {
          this.$message.error(`设置标签异常`);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.inner-list-container{
  height: 100%;
  overflow-y: auto;
}
.user-li {
  height: 65px;
  padding: 5px 15px;
  cursor: pointer;
  border-bottom: 1px solid #f2f2f2;
  color: #333333;
  font-size: 14px;
  &.active {
    background-color: #e2e2e2;
  }
}
.col1{
    flex: 0 0 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-name {
  display: flex;
  justify-content: space-between;
  .name {
    font-size: 16px;
  }
  .last-time {
    color: #666666;
  }
}
.msg-state {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  .last-text{
    color:#666
  }
}
.icon-more {
  font-size: 12px;
  .num {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 10px;
    background: #ffb800;
    color: #fff;
  }
  .off-line {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 10px;
    background: #ff5722;
    color: #fff;
  }
}

.mark-wrap {
  text-align: left;
  .category {
    margin: 4px 0;
    font-weight: 700;
  }
  .el-tag {
    margin: 4px;
    cursor: pointer;
  }
}
.remark {
  margin-top: 8px;
}
</style>